<template>
    <div id='main'>
        <div class='loading' v-if='load' :style='display'>
          <div>
            <i class="fa fa-spinner fa-spin"></i>
            <span>加载中······</span>
          </div>
        </div>
        <ul data-attr='' id='oul' >
            <li v-show='false'>{{tiplisten}}</li>
            <Allli v-for='i in article' :key='i.id' :data='i'></Allli>
        </ul>
        <div class='loadmore'> <span @click='loadmore' ><i class="fa fa-spinner fa-spin" v-if='load'></i>{{tipStatus}}</span></div>
    </div>
</template>
<script>
import Allli from '@/components/switch/menu-all-article-li'
import {highlightAll} from '@/unit/prism'
export default {
  name: 'allArticle',
  data () {
    return {
      oldtip: '',
      display: {}
    }
  },
  async mounted () {
    let tips = this.$attrs.tips
    let arr = [tips, 0]
    if (!this.$store.state.redirect) {
      await this.$store.dispatch('queryArticleListByTips', arr)
    }
    highlightAll()
  },
  beforeUpdate () {
    this.ch()
  },
  methods: {
    ch () {
      if (!this.$store.state.article[0]) return false
      let oul = document.getElementById('oul')
      function FormatDate (input) {
        let ms = Date.parse(input)
        let y = new Date(ms).getFullYear()
        return y
      }
      let d = FormatDate(this.$store.state.article[0].date)
      oul.setAttribute('data-attr', d)
    },
    loadmore () {
      this.display = {'display': 'none'}
      this.$store.dispatch('queryArticleListByTips', [this.$attrs.tips, undefined])
    }
  },
  updated () {
    highlightAll()
  },
  computed: {
    article () {
      if (this.$store.state.articlebytips.length === 0) return ''
      return this.$store.state.articlebytips
    },
    // 用来监听tips被切换时触发查询
    tiplisten () {
      // 如果是重复点击标签,或者第一次点击标签,不触发ajax
      if (this.$store.state.oldTips === this.$attrs.tips || this.$store.state.oldTips === '') {
        this.$store.dispatch('setOldTips', this.$attrs.tips)
        return ''
      }
      // 重置页面为0
      this.$store.dispatch('reTippage')
      // 设置OldTips 为当前标签
      this.$store.dispatch('setOldTips', this.$attrs.tips)
      this.$store.dispatch('queryArticleListByTips', [this.$attrs.tips, undefined, 'changetip'])
      this.$store.dispatch('setRedirect', 'true')
      console.log(2)
      return this.$attrs.tips
    },
    tipStatus () {
      return this.$store.state.tipStatus
    },
    load () {
      return this.$store.state.loading
    }
  },
  watch: {
    oldtip (oldV, newV) {
      console.log(oldV, newV)
    }
  },
  components: {
    Allli
  }
}
</script>
<style lang="less" scoped>
#main {
    position: absolute;
    right: 0;
    min-height: 100%;
    background: #eaeaea;
    left: 25rem;
    width: auto;
    padding: 2.5rem 2rem;
}
#main ul {
    /* border-bottom: 0.1rem solid #bbb; */
    position: relative;
}
@media screen and (max-width: 800px) {
    #main {
        position: static;
        min-height: 100%;
        background: #eaeaea;
        padding: 2rem 0;
    }
}
</style>
